<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>添加新闻</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="../../yl/icon.css">
  <link rel="stylesheet" href="../../yl/index.css">
  <link rel="stylesheet" href="../../style/wangeditor.css">
  <script src="../../yl/vue.js"></script>
  <script src="../../utils/compressor.js"></script>
  <!-- <script src="../../component/component.js"></script> -->
  <script src="../../yl/index.iife.min.js"></script>
  <script src="../../yl/index.js"></script>
  <script src="../../yl/jquery.min.js"></script>
  <script src="../../utils/utils.js"></script>
  <style>
    .el-select__wrapper {
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
    }
  </style>
</head>


<body>
  <div id="app">
    <div class="news_add">
      <header>
        <div class="m-toolbar">
          <div class="m-title">添加信息</div>
        </div>
      </header>
      <div class="add_form">
        <el-form :model="form" ref="contract" style="width: 100%">
          <el-descriptions title="" :column="1" border label-width="10%">

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">新闻分类</div>
              </template>
              <el-select v-model="form.News_Category_SerialNumber" placeholder="请选择分类" size="large">
                <el-option v-for="item in newsType" :key="item.News_Category_SerialNumber" :label="item.News_Category"
                  :value="item.News_Category_SerialNumber" />
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">新闻标题</div>
              </template>
              <el-input ref="personal_information" v-model="form.News_Title" class="borderless-input"
                placeholder="请输入新闻标题" />
            </el-descriptions-item>


            <el-descriptions-item>
              <template #label>
                <div class="cell-item">新闻图片</div>
              </template>
              <el-form-item class="item-form">
                <el-upload class="avatar-uploader" action="#" :auto-upload="false" :show-file-list="false"
                  :before-upload="beforeAvatarUpload" :on-change="handleImgChange">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">新闻内容</div>
              </template>
              <div class="edit">
                <div class="editq"> <el-form-item class="item-form">
                    <div id="editor—wrapper">
                      <div id="toolbar-container"><!-- 工具栏 --></div>
                      <div id="editor-container"><!-- 编辑器 --></div>
                    </div>
                  </el-form-item></div>

                <div class="editqx">
                  <div class="yl">预览</div>
                  <div class="cvhtml" v-html="form.News_Content"></div>
                </div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
      </div>
      <div class="hz"></div>
      <footer>
        <el-button plain tag="a" href="news_page.html" style="text-decoration: none;" size="large">
          返回
        </el-button>
        <el-button type="danger" @click="submitNews" size="large">提交</el-button>
      </footer>
    </div>
  </div>
  </div>
  <script src="../../../api/request.js"></script>
  <script type="text/javascript" src="../../utils/wangeditor.js"></script>
  <script type="module" src="./js/news_add.js"></script>
</body>

</html>